Vue通过配置WebSocket并实现群聊功能 |
您所在的位置：网站首页 › vue websocket消息推送 › Vue通过配置WebSocket并实现群聊功能 |
Vue通过配置WebSocket并实现群聊功能
|
原文链接：https://juejin.im/post/5e08d53a6fb9a0162b7f4bad 写jquery项目时，使用websocket很简单，不用去考虑模块化，组件之间的访问问题，面向文档编程即可，在vue项目中使用时，远远没有想象中的那么简单，需要考虑很多场景，本篇文章将与各位开发者分享下 vue-native-websocket 库的使用以及配置，用其实现群聊功能。先看下最终实现的效果
安装依赖 本文中对于 vue-native-websocket 库的讲解，项目中配置了vuex，对其不了解的开发者请移步官方文档，如果选择继续阅读本篇文章会比较吃力。 vue-native-websocket安装 # yarn | npm 安装 yarn add vue-native-websocket | npm install vue-native-websocket --save
安装成功 配置插件 在 main.js 中进行导入 import VueNativeSock from 'vue-native-websocket' 使用 VueNativeSock 插件，并进行相关配置 // main.js // base.lkWebSocket为你服务端websocket地址 Vue.use(VueNativeSock,base.lkWebSocket,{ // 启用Vuex集成,store的值为你的vuex store: store, // 数据发送/接收使用使用json格式 format: "json", // 开启自动重连 reconnection: true, // 尝试重连的次数 reconnectionAttempts: 5, // 重连间隔时间 reconnectionDelay: 3000, // 将数据进行序列化，由于启用了json格式的数据传输这里需要进行重写 passToStoreHandler: function (eventName, event) { if (!eventName.startsWith('SOCKET_')) { return } let method = 'commit'; let target = eventName.toUpperCase(); let msg = event; if (this.format === 'json' && event.data) { msg = JSON.parse(event.data); if (msg.mutation) { target = [msg.namespace || '', msg.mutation].filter((e) => !!e).join('/'); } else if (msg.action) { method = 'dispatch'; target = [msg.namespace || '', msg.action].filter((e) => !!e).join('/'); } } this.store[method](target, msg); this.store.state.sockessage = msg; } });vuex的相关配置：mutations和actions添加相关函数 // vuex配置文件 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); export default new Vuex.Store({ state: { token:"", userID:"", // 用户头像 profilePicture: "", socket: { // 连接状态 isConnected: false, // 消息内容 message: '', // 重新连接错误 reconnectError: false } }, mutations: { SOCKET_ONOPEN (state, event) { // 连接打开触发的函数 Vue.prototype.$socket = event.currentTarget; state.socket.isConnected = true }, SOCKET_ONCLOSE (state, event) { // 连接关闭触发的函数 state.socket.isConnected = false; console.log(event); }, SOCKET_ONERROR (state, event) { // 连接发生错误触发的函数 console.error(state, event) }, SOCKET_ONMESSAGE (state, message) { // 收到消息时触发的函数 state.sockessage = message }, SOCKET_RECONNECT(state, count) { // 重新连接触发的函数 console.info(state, count) }, SOCKET_RECONNECT_ERROR(state) { // 重新连接失败触发的函数 state.socket.reconnectError = true; }, }, actions: { customerAdded (context) { // 新连接添加函数 console.log('action received: customerAdded'); console.log(context) } }, modules: { } })至此 vue-native-websocket 配置结束，如需了解更多配置方法，请移步 npm仓库 使用插件并实现群聊 在消息发送接收组件中添加 onmessage 监听(mounted生命周期中) // 监听消息接收 this.$options.sockets.onmessage = (res)=>{ // res.data为服务端返回的数据 const data = JSON.parse(res.data); // 200为服务端连接建立成功时返回的状态码(此处根据真实后端返回值进行相应的修改) if(data.code===200){ // 连接建立成功 console.log(data.msg); }else{ // 获取服务端推送的消息 const msgObj = { msg: data.msg, avatarSrc: data.avatarSrc, userID: data.userID }; // 渲染页面:如果msgArray存在则转json if(lodash.isEmpty(localStorage.getItem("msgArray"))){ this.renderPage([],msgObj,0); }else{ this.renderPage(JSON.parse(localStorage.getItem("msgArray")),msgObj,0); } } };实现消息发送 // 消息发送函数 sendMessage: function (event) { if (event.keyCode === 13) { // 阻止编辑框默认生成div事件 event.preventDefault(); let msgText = ""; // 获取输入框下的所有子元素 let allNodes = event.target.childNodes; for(let item of allNodes){ // 判断当前元素是否为img元素 if(item.nodeName==="IMG"){ msgText += `/${item.alt}/`; } else{ // 获取text节点的值 if(item.nodeValue!==null){ msgText += item.nodeValue; } } } // 消息发送: 消息内容、状态码、当前登录用户的头像地址、用户id this.$socket.sendObj({msg: msgText,code: 0,avatarSrc: this.$store.state.profilePicture,userID: this.$store.state.userID}); // 清空输入框中的内容 event.target.innerHTML = ""; } }实现页面渲染 // 渲染页面函数 renderPage: function(msgArray,msgObj,status){ if(status===1){ // 页面第一次加载，如果本地存储中有数据则渲染至页面 let msgArray = []; if(localStorage.getItem("msgArray")!==null){ msgArray = JSON.parse(localStorage.getItem("msgArray")); for (let i = 0; i总结 以上所述是小编给大家介绍的Vue通过配置WebSocket并实现群聊功能，希望对大家有所帮助！ » 本文来自：前端开发者 » 《Vue通过配置WebSocket并实现群聊功能_咋地 _前端开发者》 » 本文链接地址：https://www.rokub.com/72032.html » 您也可以订阅本站：https://www.rokub.com |
【本文地址】
今日新闻 |
推荐新闻 |